<template>
	<view class="flex-colume-start content taskListPage">
		<view class="flex-row-center" style="width: 750rpx; background-color: #f8f8f8;">
			<view class="flex-row-start searchWhite">
				<input @confirm="requestList" placeholder="搜索" v-model="keyword" />
				<image @click="requestList()" src="/static/login/main_icon10.png" mode="widthFix" style="width: 40rpx;">
				</image>

			</view>

		</view>

		<view class="flex-row-start whiteBox" v-if="leftList.length > 0">
			<view class="line1"></view>
			<view class="leftList">
				<view @click="leftItemClick(index)" class="leftItem" :class="leftIndex == index?'leftItem-blue':''" v-for="(item,index) in leftList"
					:key="index">
					{{item.name}}<span class="num">{{item.number1}}</span>
				</view>
			</view>


			<view class="flex-colume-start rightList">
				<view v-if="leftList" class="flex-colume-start rightItem" v-for="(item,index) in leftList[leftIndex].rightList"
					:key="index">
					
					<view>{{item.id}} / {{item.name}} / {{item.user_number}}</view>
					<view class="title2">{{item.address}}</view>
					<view v-if="!item.new_number || item.new_number < 11" class="title3">旧表编号：{{item.number}}</view>
					<view v-else class="title3" style="margin-top: 10rpx;">旧表编号：{{item.number}}</view>
					<view style="margin-top: 10rpx;" v-if="item.new_number">新表：<span class="redText1">{{item.new_number}}</span></view>
					<view style="margin-top: 10rpx;" v-if="item.new_number">旧表读数：<span class="redText1">{{item.last_degrees}}</span>{{item.last_time}}</view>
					
					<view v-if="!item.new_number || item.new_number < 11" class="b2" @click="rightItemClick(index)">换表</view>

				</view>

			</view>

		</view>


	</view>
</template>

<script>
	import {
		meterInfo,
		taskList
	} from '@/api/api'
	export default {
		data() {
			return {
				leftIndex: 0,
				keyword: '',
				leftList: []
			}
		},
		onShow(e){
			this.requestList()
		},
		methods: {
			leftItemClick(index){
				this.leftIndex = index
			},
			rightItemClick(index){
				var item = this.leftList[this.leftIndex].rightList[index]
				uni.navigateTo({
					url:'/pages/meterInfo/meterInfo?code='+item.number
				})
				
			},
			requestList() {
				var params = {}
				if (this.keyword) {
					params.keyword = this.keyword
				}
				taskList(params).then(res => {
					if (res.code == 1) {
						var leftList = res.data.categoryList
						this._dataArr = res.data.list
						leftList.forEach(model => {
							var arr1 = []
							model.number1 = 0;
							this._dataArr.forEach(item => {
								if (item.category_id == model.id) {
									if (!item.new_number || item.new_number < 11){
										model.number1 ++ 
										
									}
									arr1.push(item)
								}
							})
							model.rightList = arr1

						})
						this.leftList = leftList
						return

					}
					uni.showToast({
						title: res.msg
					})



				})


			}



		}
	}
</script>



<style lang="scss" scoped>
	.taskListPage {
		.searchWhite {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: 660rpx;
			background-color: white;
			border-radius: 8rpx;
			justify-content: space-between;
			padding: 0rpx 25rpx;

			input {
				flex: 1;
				margin-right: 20rpx;
				font-size: 28rpx;
				height: 60rpx;

			}
		}

		.whiteBox {
			align-items: flex-start;
			width: 750rpx;
			box-sizing: border-box;
			position: relative;

			.line1 {
				position: absolute;
				top: 0rpx;
				width: 1px;
				left: 175rpx;
				height: 100%;
				background-color: rgb(230, 230, 230);


			}

			.leftList {
				width: 175rpx;

				.leftItem {
					width: 100%;
					padding: 40rpx 10rpx;
					box-sizing: border-box;
					// background-color: red;
					font-size: 26rpx;
					line-height: 30rpx;
					border-left: 2px solid white;
					border-bottom: 1px solid rgb(230, 230, 230);

					.num {
						background-color: #ff5e6a;
						color: white;
						font-size: 20rpx;
						height: 30rpx;
						line-height: 30rpx;
						padding: 0rpx 18rpx;
						box-sizing: border-box;
						border-radius: 15rpx;
						float: right;


					}

				}

				.leftItem-blue {
					color: #4985ff;
					border-left: 2px solid #4985ff;
				}


			}


			.rightList {
				width: 575rpx;
				background-color: rgba(238, 238, 238, 0.2);
				padding-bottom: 80rpx;
				box-sizing: border-box;
				.rightItem{
					position: relative;
					align-items: flex-start;
					font-size: 26rpx;
					width: 520rpx;
					padding: 28rpx 2rpx;
					border-bottom: 0.5px solid rgba(230, 230, 230, 0.5);
					.redText1{
						margin-right: 10rpx;
						color: rgb(255, 68, 68);
					}

					.title2{
						font-weight: 500;
						margin-top: 16rpx;
						
					}
					.title3{
						margin-top: 45rpx;
					}
					.b2{
						position: absolute;
						right: 5rpx;
						bottom: 54rpx;
						border: 1px solid #4985ff;
						color: #4985ff;
						font-size: 26rpx;
						background-color: #eaf1ff;
						line-height: 48rpx;
						padding: 0rpx 26rpx;
						border-radius: 99999px;
					
						
						
						
					}
					
				}
				
			}

			.scanBtn {
				margin-top: 30rpx;
				margin-bottom: 35rpx;
				border: 1px solid #d3e2ff;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #3277ff;

			}

			.item2 {
				width: 100%;
				margin-bottom: 20rpx;

				.title2 {
					font-size: 28rpx;
					width: 180rpx;

				}

				.input1 {
					height: 30rpx;
					font-size: 26rpx;
					font-weight: 500;
					flex: 1;
				}

			}

		}
	}
</style>